<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <title>Performance test</title>
    <style type="text/css">
        table {
            width: 700px;
            padding: 0;
            margin: 20px; 
        }
        th {
            font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7; 
            letter-spacing: 2px;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #CAE8EA  no-repeat;
        }
        td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #fff;
            font-size:11px; 
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }
        iframe {
            display: none;
        }
    </style>
</head>
<body>
    <IFRAME name="sweet" src="sweet.html"></IFRAME>
    <IFRAME name="jtemplate" src="jtemplate.html"></IFRAME>
    <IFRAME name="ext" src="ext.html"></IFRAME>
    <IFRAME name="jst" src="jst.html"></IFRAME>
    <table>
        <tr>
            <th scope="col"></th>
            <th scope="col">Sweet</th>
            <th scope="col">jTemplate</th>
            <th scope="col">Ext XTemplate</th>
            <th scope="col">TrimPath JST</th>
        </tr>
        <tr>
            <td>Compiling speed</td>
            <td id="sweet_compile">loading...</td>
            <td id="jtemplate_compile">loading...</td>
            <td id="ext_compile">loading...</td>
            <td id="jst_compile">loading...</td>
        </tr>
        <tr>
            <td>Applying data speed</td>
            <td id="sweet_apply">loading...</td>
            <td id="jtemplate_apply">loading...</td>
            <td id="ext_apply">loading...</td>
            <td id="jst_apply">loading...</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var tests = [],
            frameEls = document.getElementsByTagName('iframe'), iframe;

        for (var i = 0, l = frameEls.length; i < l; i++) {
            iframe = frameEls[i];
            tests.push({
                execute: window.frames[iframe.name].test || iframe.contentWindow.test,
                name: iframe.name
            });
        }

        var timer = null;
        function testRunner() {
            var test = tests.shift();
            if (!test) return;
            var name = test.name,
                compileEl = document.getElementById(name + "_compile"),
                applyEl = document.getElementById(name + "_apply"),
                result = test.execute();
            compileEl.innerHTML = result.compileTime;
            applyEl.innerHTML = result.applyTime;
            timer = setTimeout(testRunner, 250);
        }
        testRunner();
    }

</script>
</html>